import React, { Component } from 'react'
import Header from '../../components/header/header'
import "./Shop.less"
import { SwipeAction } from 'antd-mobile'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { actions, getList, getPre, getAllChecked, getAllPrice } from "../../store/modules/shop.js"

class Shop extends Component {
    componentDidMount() {
        let { shop: { reqList } } = this.props
        console.log(this.props);
        reqList();
    }
    render() {
        let { list, pre, shop: { reqAllChecked, reqChecked, reqcartdelete, reqcartedit,changeAllprice }, allChecked, allprice } = this.props;
        //总价
        let allPricee = list.reduce(
            (val, item) => (item.checked ? val + item.price * item.num : val),
            0
        );
        changeAllprice(allPricee)
        // console.log(allPricee);
        return (
            <div className='shop'>
                <Header text="购物车"></Header>
                <div className='con'>
                    <div>
                        {list.length > 0 ? (
                            <>
                                {list.map((item, index) => {
                                    return (
                                        <SwipeAction
                                            onAction={(e) => { reqcartdelete(this.props, index) }}
                                            key={index}
                                            rightActions={[
                                                {
                                                    key: 'delete',
                                                    text: '删除',
                                                    color: 'danger',

                                                },
                                            ]}
                                        >
                                            <div style={{ padding: 12 }} className="kapian">
                                                <input type="checkbox" checked={item.checked} onChange={(e) => reqChecked(e.target.checked, index)} />
                                                <img src={pre + item.img} alt="" width={80} />
                                                <div>
                                                    <p>{item.goodsname}</p>
                                                    <p>{item.price}</p>
                                                </div>
                                                <div><button onClick={(e) => reqcartedit(this.props, index, 1)}>-</button>{item.num}<button onClick={(e) => reqcartedit(this.props, index, 2)}>+</button></div>
                                            </div>
                                        </SwipeAction>
                                    )
                                })}
                            </>
                        ) : <div>暂无数据</div>}
                    </div>

                    <div className='jiesuan'>
                        <p>全选：<input type="checkbox" checked={allChecked} onChange={(e) => reqAllChecked(e.target.checked)} /></p>
                        <p>合计: <span>{allprice.toFixed(2)}</span></p>
                        <button>去结算</button>
                    </div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        list: getList(state),
        pre: getPre(state),
        allChecked: getAllChecked(state),
        allprice: getAllPrice(state),
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        shop: bindActionCreators(actions, dispatch)
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Shop)